// 合并处理多次对DOM和样式的修改
// css-text
const el = document.getElementById('test')
el.style.cssText += 'border-left: 1px; border-right: 2px; padding: 5px;'
// css-class
el.className += 'active'

// 批量修改dom 和浏览器自身的优化重叠了
// 元素脱离文档流，修改，带回文档流

function appendDataToElement(ele, data) {
  let li
  for (let i = 0; i < data.length; i++) {
    li = document.createElement('li')
    li.textContent = 'text'
    ele.appendChild(li)
  }
}
// 直接做，每次循化插入新的节点，导致浏览器频繁的回流? 并不，浏览器的优化会使用队列来存储多次修改
const ul = document.getElementById('list')
appendDataToElement(ul, data)
// 1. 隐藏节点然后显示节点，只产生两次重绘
const ul = document.getElementById('list')
ul.style.display = 'none'
appendDataToElement(ul, data)
ul.style.display = 'block'
// 2. 利用文档片段在当前的DOM之外构建一个子树然后在把它拷贝回文档 createDocumentFragment
const ul = document.getElementById('list')
const fragment = document.createDocumentFragment()
appendDataToElement(fragment, data)
ul.appendChild(fragment)
// 3. 深拷贝节点到一个脱离文档流的节点上，修改节点之后再替换原始的元素 cloneNode+replaceChild
const ul = document.getElementById('list')
const clone = ul.cloneNode(true)
appendDataToElement(clone, data)
ul.parentNode.replaceChild(clone, ul)

// 避免同步布局事件
// 访问元素的某些属性会导致强制同步布局事件
function initP() {
  for (let i = 0; i < paragraphs.length; i++) {
    paragraphs[i].style.width = box.offsetWidth + 'px'
  }
}
const width = box.offsetWidth
function initP() {
  for (let i = 0; i < paragraphs.length; i++) {
    paragraphs[i].style.width = width + 'px'
  }
}

// 复杂动画，使用绝对定位脱离文档流，否则会引起父元素以及后续元素频繁的回流

// CSS3硬件加速，使用transform，opacity，filters不会引起回流重绘
// 问题：
// 1. 内存占用大
// 2. GPU渲染字体导致抗锯齿无效
